<template>
  <div class='tab1'>
    <section v-if='res.length'>
        <ul class="tab1-list" v-for='(k,i) in res' @click='gotoDetail(k)'> 
            <li>
                <div>
                    <span class='tab1-list-icon' v-if='k.executeType=="1" || k.executeType == "2" '>请</span>
                    <span v-else class='tab1-list-icon xiaojia'>销</span>
                </div>
                <div v-if='k.executeType=="3" || k.executeType=="4"'>{{k.executeType=="2" || k.executeType=="4" ? k.oldSourceName : k.sourceName}}的销假申请</div>
                <div v-else>{{k.executeType=="2" || k.executeType=="4" ? k.oldSourceName : k.sourceName}}的请假申请</div>
                <div>{{k.deptname}}</div>
                <div class="color-999" style="margin-left:20px">{{k.wfBusinessProcessData.processTypeName}} (共{{k.executeType=="3" || k.executeType=="4" ? k.wfBusinessProcessData.effeLeaveDay : k.wfBusinessProcessData.leaveDay}}天)</div>
            </li>
            <li>
                <div class="color-999">{{k.executeType | handleTitle}}假时间</div>
                <div>
                    <span>{{(k.executeType=="3" || k.executeType=="4" ? k.wfBusinessProcessData.effeStartTime : k.wfBusinessProcessData.startTime) | handleDisplayDate}} &nbsp;&nbsp;{{(k.executeType=="3" || k.executeType=="4" ? k.wfBusinessProcessData.effeStartTimeHalfDaySign : k.wfBusinessProcessData.startTimeHalfDaySign) | ampm}}&nbsp;&nbsp;</span> &nbsp;至&nbsp; 
                    <span>&nbsp;&nbsp;&nbsp;{{(k.executeType=="3" || k.executeType=="4" ? k.wfBusinessProcessData.effeEndTime : k.wfBusinessProcessData.endTime) | handleDisplayDate}}&nbsp;&nbsp; {{(k.executeType=="3" || k.executeType=="4" ? k.wfBusinessProcessData.effeEndTimeHalfDaySign : k.wfBusinessProcessData.endTimeHalfDaySign) | ampm}}</span>
                </div>
            </li>
            <li>
                <div class="color-999">{{k.executeType | handleTitle}}假理由</div>
                <div class='reason'>{{k.executeType == 1 || k.executeType == 2 ? k.wfBusinessProcessData.leaveReason : k.wfBusinessProcessData.sickLeaveReason}}</div>
            </li>
            <li>
                <div class="color-999">当前步骤</div>
                <div :class="handleColor(k.status)">{{k.status | handleStatus}}</div>
            </li>
        </ul>
        <p v-if='!loadAllFlag' class="loadmore" @click.stop='handleLoadMore'>加载更多...</p>
        <p v-else class="loadmore2">已加载全部</p>
    </section>

    <section class="noData" v-if='!res.length'>
        <div>
            <img src="../../../../static/images/nodata.png" alt="">
        </div>
        <p>您暂时还没有相关已阅</p>
    </section>

  </div>
</template>

<script>
export default {
  data() {
      return {
          res: [],
          pageNum: 1,
          pageSize: 10,
          total: 0,
          loadAllFlag: false
      };
  },
  filters: {
      ampm: function(value) {
          if (value == '1') {
              return '上午';
          } else if (value == '2') {
              return '下午';
          }
      },
      handleDisplayDate: function(val){
          if (val) {
                if (typeof val === 'string' && val.split(' ').length>1) {
                    return val.split(' ')[0]
                }
              var dataObj = new Date(val);  
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              return year + "-" + month + "-" + day 
          } else {
              return ''
          }
      },
      handleTitle: function(val){
          return val == '1' ? '请' : (val == '3' ? '销' : '请')
      },
      handleStatus: function(status){
          return status == 1 ? '已备案' : (status == 2 ? '审批中' : '已拒绝');
      }
  },
  computed:{

  },
  methods: {
    handleColor(str) {
        switch (str) {
            case 1:
                return 'pass';
                break;
            case 0:
                return 'nook';
                break;
            default:
                return 'checking';
                break;
        }
    },

    handleLeaveReason(excuteType){
        if (excuteType == 1 || excuteType == 2) {
            return this.res.wfBusinessProcessData.leaveReason 
        } else if (excuteType == 3 || excuteType == 4) {
            return this.res.wfBusinessProcessData.sickLeaveReason
        }
        
    },

    handleLoadMore() {
        this.pageNum++;
        this.sendAjax('loadMore');
    },
    sendAjax(type) {
        let params = {
            pageNo: this.pageNum,
            pageSize: this.pageSize
        };

        this.Axios.Post(this.URL.findCopyToMeRead.url, params).then(res => {
            
            if (type) {
                this.res = this.res.concat(res.data.datas);
            } else {
                this.res = res.data.datas;
            }
            // this.res = res.data.datas;
            if (!this.res) {
                return;
            }
            this.pageNum = res.data.page.pageNum;
            this.pageSize = res.data.page.pageSize;
            this.total = res.data.page.total;

            if (this.res && this.res.length >= this.total) {
                this.loadAllFlag = true;
            }
        });
    },
    gotoDetail(obj) {
        this.$router.push({ name: 't5detail',query: {id:obj.id}});
    }
  },
  mounted() {
      this.sendAjax();
  }
};
</script>

<style lang='less' scoped>
.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.noData {
  margin-top: 130px;
  div{
    text-align: center;
    margin: 0 auto;
    width:  350px *1.3;
    height: 350px;
    
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  p {
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
  }
}
.loadmore {
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  margin: 20px 0;
}

.loadmore2 {
  color: #999;
  text-align: center;
  font-size: 16px;
  margin: 20px 0;
}
.tab1 {
  padding: 20px 0;
  margin: 0 auto;
  min-height: 100vh;

  .tab1-list:first-of-type {
    margin-top: 90px;
  }
  .tab1-list {
    width: 75%;
    margin: 20px auto 0 auto;
    padding-bottom: 16px;
    padding-top: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    transition: all 0.3s linear;
    cursor: pointer;
    background-color: #fff;
    border-radius: 4px;

    &:hover {
      transform: translate(-2px, -2px);
    }

    li {
      display: flex;
    }
    & > li:first-of-type {
      margin-bottom: 20px;
      margin-left: 0;
    }

    & > li {
      margin-top: 10px;
      margin-left: 20px;

      .reason {
        max-width: 88%;
        white-space: wrap;
        word-wrap: break-word;
      }

      .tab1-list-icon {
        display: block;
        position: relative;
        top: -2px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #38f;
        font-size: 14px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        margin-left: 20px;
        margin-right: 10px;
      }
      .tab1-list-icon.xiaojia {
        background-color: #75d155;
      }
      .tab1-list-icon.daiqing{
      	background-color: #f7ba2a;
      }
    }
  }
}
.color-999 {
  color: #999;
  margin-right: 20px;
}
.color-38f {
  color: #38f;
}
</style>
